<template>
  <div class="outer">
    <div class="top-title">
      <span>{{localQuestion.title}}</span>
      <el-tag type="danger" v-if="localQuestion.must">(必做)</el-tag>
    </div>
    <div class="question">{{localQuestion.description}}</div>
    <el-radio-group v-model="localModel" @change="handleChange" class="choice">
      <div v-for="(item,index) in localQuestion.options" :key="index" style="display:flex;margin-top:5px">
        <el-tag :type="getType(index)" v-if="options.limitNumber" style="width:65px">{{countLeft(index)}}</el-tag>
        <el-radio :label="item.label" :disabled="noLeft(index)">
          {{item.label}}</el-radio>
      </div>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: "QitemRadio",
  props: {
    showMax: {
      default: false
    },
    options: {
      type: Object,
      default: function() {
        return {
          limitNumber: false
        };
      }
    },
    leftNumber: {
      type: Array,
      default: function() {
        return [];
      }
    },
    question: {
      type: Object,
      default: function() {
        return {
          key: 1,
          order: 1,
          type: "single",
          must: true,
          title: "单选题",
          description: "默认单选题",
          options: [{ label: "A" }, { label: "B" }],
          chosen: ["A"]
        };
      }
    }
  },
  data() {
    return {
      localQuestion: this.question,
      localModel: ""
    };
  },
  methods: {
    _getArr() {
      //获得目标数组，编辑模式下使用最大数量，答卷模式下使用剩余数量
      if (this.showMax) return this.localQuestion.chosen;
      return this.leftNumber;
    },
    getType(index) {
      //获得tag的类型
      var arr = this._getArr();
      console.log(arr);
      if (arr[index] != undefined) {
        if (arr[index] == -1) return "success";
        else if (arr[index] == 0) return "info";
      }
      return "warning";
    },
    countLeft(index) {
      //获得剩余数量
      var arr = this._getArr();
      if (arr[index] != undefined) {
        if (arr[index] == -1) return "不限额";
        else return "剩余" + arr[index];
      }
      return 0;
    },
    noLeft(index) {
      //是否无剩余(使得选项无效)
      var arr = this._getArr();
      if (this.options.limitNumber == false) return false;
      return arr[index] == 0;
    },
    checkAnswer() {
      if (this.localQuestion.must == false) return true;
      return this.localModel != "";
    },
    handleChange(value) {
      this.$emit("change", { value, type: "single" });
    }
  },
  mounted() {
    console.log(this.options);
  }
};
</script>

<style scoped>
.outer {
  width: 100%;
  /* background-color: aqua; */
}
.top-title {
  width: 100%;
  line-height: 32px;
  display: inline-block;
  text-align: left;
  padding: 0 0 0px 10px;
  font-weight: 700;
  box-sizing: border-box;
}
.el-tag.el-tag--danger {
  background-color: transparent;
  border: none;
  text-align: left;
}
.question {
  width: 100%;
  /* background-color: turquoise; */
  text-align: left;
  padding-left: 10px;
  margin: 10px auto;
  margin-top: 3px;
  box-sizing: border-box;
}
/* .choice{
  position: relative;
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  border-color: turquoise;
} */
.el-radio-button__inner,
.el-radio-group {
  /* background-color: red; */
  position: relative;
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  /* height: 60px; */
}
.el-radio {
  text-align: left;
  padding-left: 10px;
  display: block;
  min-height: 30px;
  line-height: 30px;
}
.el-radio__inner {
  width: 14px !important;
  height: 14px !important;
  border-radius: 100%;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  padding-top: -10px;
}
.el-radio__label {
  font-size: 13px;
  display: inline-block;
}
</style>